<template>
  <div class="user-conversion">
    <div class="main-hd">
      <h2>{{$t('m.Shōuzhītǒngjì')}}</h2>
    </div>
    <div class="main-bd">
      <div class="content-wrap">
          <div class="items">
            <div class="label">{{$t('m.pst')}}</div>
            <DatePicker type="daterange" v-model="selectDate" format="yyyy-MM-dd" :placeholder="$t('m.pst')" style="width: 200px;" class="mr10" :options="disDate" @on-change="handleDatePicker"></DatePicker>
          </div>

          <div style="margin:20px 0;">
            <Button class="parameter_button" style="margin-right:30px;" @click="recycleQuery">{{$t('m.recycle')}}</Button>
            <Button class="parameter_button" type="primary" @click="andPaymentsStatisticsQuery">{{$t('m.cháxún')}}</Button>

            <Button type="primary" @click="exportData" style="float: right; margin: 4px;">
              <Icon type="ios-download-outline"></Icon> {{$t('m.dǎochūshùjù')}}
            </Button>
          </div>
        <div class="table-con" style="margin-top: 30px;">
          <h3 class="table-title">{{$t('m.dàikuǎnshùjùhuìzǒng')}}</h3>
          <Table border :columns="APScollectTable" :data="APScollectData" :loading="APScollectLoading"></Table>
        </div>
        <div class="table-con">
          <h3 class="table-title">{{$t('m.měirìshōuzhīxiángqíng')}}</h3>
          <div class="search-con">
          </div>
          <Table border :columns="APSdetailsTable" :data="APSdetailsData" :loading="APSdetailsLoading" ref="table"></Table>
          <div>
            <Page class="pagebox" :total="APSdetailsDataSize" :current.sync="APSpageNumber" :page-size-opts="[10, 20, 40, 80, 100]" show-total show-elevator show-sizer @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange"></Page>
            <span class="pageSum">{{$t('m.huíkuǎnjīnézǒngshù')}}：{{APScollectData[0].pageRepaidAmount }} {{$t('m.yuán')}}</span>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatTreeMount } from "@/libs/util";
import excel from '@/static/excel'
import qs from 'qs';
import mixin from '../report/mixin';
import { repayChannel } from '@/static/constant';
import poptipCustom from '@/components/common/poptip-custom';

export default {
  name: 'financeStatistics',
  mixins: [mixin],
  data () {
    return {
      APSapplyDateBegin: '',
      APSapplyDateEnd: '',
      APSpageNumber: 1,
      APSpageSize: 10,
      APScollectData: [{}],
      APSdetailsData: [],
      APScollectLoading: true,
      APSdetailsLoading: true,
      APSdetailsDataSize: 1,
      selectDate: '',
      APScollectTable: [
        {
          title: this.$t('m.dayTime'),
          key: 'date',
          align: 'center'
        },
        {
          title: this.$t('m.loanCount'),
          key: 'count',
          align: 'center'
        },
        {
          title: this.$t('m.contractM'),
          key: 'loanAmount',
          align: 'center',
            render: (h, param) => {
              return h("div", formatTreeMount(param.row.loanAmount));
            }
        },
        {
          title: this.$t('m.rLm'),
          key: 'payAmount',
          align: 'center',
            render: (h, param) => {
              return h("div", formatTreeMount(param.row.payAmount));
            }
        },
        {
          title: this.$t('m.huíkuǎnjīné'),
          key: 'repaidAmount',
          align: 'center',
            render: (h, param) => {
              return h("div", formatTreeMount(param.row.repaidAmount));
            }
        }
      ],
      APSdetailsTable: [
        {
          title: this.$t('m.dayTime'),
          key: 'date',
          align: 'center'
        },
        {
          title: this.$t('m.loanCount'),
          key: 'count',
          align: 'center'
        },
        {
          title: this.$t('m.contractM'),
          key: 'loanAmount',
          align: 'center',
            render: (h, param) => {
              return h("div", formatTreeMount(param.row.loanAmount));
            }
        },
        {
          title: this.$t('m.rLm'),
          key: 'payAmount',
          align: 'center',
            render: (h, param) => {
              return h("div", formatTreeMount(param.row.payAmount));
            }
        },
        {
          title: this.$t('m.huíkuǎnjīné'),
          key: 'repaidAmount',
          align: 'center',
            render: (h, param) => {
              return h("div", formatTreeMount(param.row.repaidAmount));
            }
        }
      ],
      disDate: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now();
        }
      },
    }
  },
  created () {
    this.andPaymentsStatisticsQuery();
  },
  watch: {
  },
  methods: {
recycleQuery(){

        this.APSapplyDateBegin = "";
        this.APSapplyDateEnd = "";
        this.andPaymentsStatisticsQuery()
},

    andPaymentsStatisticsQuery () {
      this.APScollectLoading = true
      this.APSdetailsLoading = true
      let param = {}, query = '';
      param.applyDateBegin = this.APSapplyDateBegin,
        param.applyDateEnd = this.APSapplyDateEnd,
        param.pageNumber = this.APSpageNumber,
        param.pageSize = this.APSpageSize,
        Object.keys(param).forEach((item, index) => {
          if (param[item]) {
            query += `${index === 0 ? '' : '&'}${item}=${param[item]}`;
          }
        });
      var url = `/api/laocai/finance/in-out/stat?${query}`
      this.$http.get(url).then((res) => {
        if (res.body.code == 0) {
          this.APScollectData = [res.body.result.statisticsVO]
          this.APScollectData[0].date = this.APSapplyDateBegin == '' ? this.$t('m.dàngtiān') : this.APSapplyDateBegin + ' ~ ' + this.APSapplyDateEnd
          this.APScollectData[0].pageRepaidAmount = res.body.result.repaidAmount
          this.APSdetailsData = res.body.result.orderStatisticsVOs.records
          this.APSdetailsDataSize = res.body.result.orderStatisticsVOs.total
          setTimeout(() => {
            this.APScollectLoading = false
            this.APSdetailsLoading = false
          }, 500);
        }
        this.$Message.success(this.$t('m.errorCode' + res.body.code));
      });
    },
    handleDatePicker (e) {
      if (!e[0]) {
        this.APSapplyDateBegin = "";
        this.APSapplyDateEnd = "";

      } else {
        this.APSapplyDateBegin = e[0];
        this.APSapplyDateEnd = e[1];
      }
      this.APSpageNumber = 1,
        this.andPaymentsStatisticsQuery()

    },
    // 页码改变的回调，返回改变后的页码
    handleCurrentChange (val) {
      this.APSpageNumber = val;
      this.andPaymentsStatisticsQuery();
    },
    // 切换每页条数时的回调，返回切换后的每页条数
    handleSizeChange (val) {
      this.APSpageSize = val;
      this.andPaymentsStatisticsQuery();
    },
    // 导出用户数据汇总Excel
    exportData (type) {
      let APSexcel = []
      APSexcel[0] = {
        'date': this.$t('m.dàikuǎnshùjùhuìzǒng'),
        'count': '',
        'loanAmount': '',
        'payAmount': '',
        'repaidAmount': ''
      }
      APSexcel[1] = {
        'date': this.$t('m.dayTime'),
        'count': this.$t('m.loanCount'),
        'loanAmount': this.$t('m.contractM'),
        'payAmount': this.$t('m.rLm'),
        'repaidAmount': this.$t('m.huíkuǎnjīné')
      }
      APSexcel[2] = this.APScollectData[0]
      if (this.APSdetailsData.length) {
        const params = {
          title: [this.$t('m.dayTime'), this.$t('m.loanCount'), this.$t('m.contractM'), this.$t('m.rLm'), this.$t('m.huíkuǎnjīné')],
          key: ['date', 'count', 'loanAmount', 'payAmount', 'repaidAmount'],
          data: [...this.APSdetailsData, ...APSexcel],
          autoWidth: true,
          filename: this.$t('m.Shōuzhītǒngjì')
        }
        excel.export_array_to_excel(params)

      } else {
        this.$Message.info(this.$t('m.biǎogéshùjùbùnéngwéikōng'))
      }
    },
  }
}
</script>

<style lang="scss" scoped>
@import "../../static/common.scss";
.items {
  display: inline-block;
  margin-right: 20px;
  width: 200px;
  .label {
    overflow: hidden;
    white-space: inherit;
    text-align: right;
    color: #222;
    font-size: 14px;
    margin-right: 10px;
  }
}
.search-con {
  margin-bottom: 18px;
  .search-col {
    margin-left: 12px;
  }
  .search-col,
  .search-input {
    display: inline-block;
    width: 200px;
  }
}

.table-con {
  margin-top: 30px;
  .table-title {
    margin-bottom: 18px;
  }

  .expand-more {
    line-height: 32px;
    border-left: 1px solid #e8eaec;
    border-right: 1px solid #e8eaec;
    border-bottom: 1px solid #e8eaec;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
  }
}

.ivu-page {
  margin-top: 12px;
  text-align: right;
}
.pageSum {
  float: right;
  height: 33px;
  line-height: 33px;
  margin-right: 30px;
  margin-top: 10px;
}
.pagebox {
  float: right;
}
</style>
